<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label">名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" id="search-role-name" autocomplete="off" placeholder="请输入名称"
                   class="layui-input">
        </div>
        <button class="layui-btn" id="search-role-btn">搜索</button>
    </div>
</div>
<table id="role-table" lay-filter="role-table">
</table>
<script type="text/html" id="role-head-bar">
    {{#   if(hasPermission("sys:role:add")){   }}
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="goEdit"><i class="layui-icon">&#xe654;</i>添加</button>
    </div>
    {{#   }    }}
</script>
<script type="text/html" id="role-role-bar">
    {{#   if(hasPermission("sys:role:update")){   }}
    <a class="layui-btn layui-btn-xs" lay-event="edit-role">编辑</a>
    {{#   }    }}
    {{#   if(hasPermission("sys:role:assign")){   }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assign-menu">授权</a>
    {{#   }    }}
</script>
<script type="text/javascript" th:inline="none">
    //layui use只能出现一次
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table;//获取表格插件
        var layer = layui.layer;
        var form = layui.form;
        //使用插件渲染表格
        table.render({
            id: 'role-table',
            elem: '#role-table',//页面中表格元素的id   id="demo"的元素
            page: true,
            limit: 2,
            toolbar: "#role-head-bar",
            limits: [2, 4, 6, 8, 10],
            url: 'role.html?act=table',//后台controller中的地址  @RequestMapping
            cols: [[
                {type: 'checkbox'},
                {field: 'id', title: 'ID'},
                {field: 'name', title: '姓名'},
                {field: 'remark', title: '备注'},
                {
                    field: 'status', title: '状态', templet: function (d) {//d是当前这一行的数据
                    return d.status == 1 ? '有效' : '无效'
                }
                }, {fixed: 'right', title: '操作', toolbar: '#role-role-bar', width: 180}
            ]]
        })
        //头工具栏事件
        table.on('toolbar(role-table)', function (obj) {
            switch (obj.event) {
                case 'goEdit':
                    openEditWindow(null);
                    break;
            }
            ;
        });
        //监听行工具事件
        table.on('tool(role-table)', function (obj) {
            var data = obj.data;//选中的是哪一行
            switch (obj.event) {
                case 'edit-role': {
                    openEditWindow(data);
                    break;
                }
                case 'assign-menu': {
                    layer.open({
                        type: 1,
                        content: $('#menu-tree-layer').html(),
                        title: '角色授权'
                        , area: ['400px', '600px'],
                        btn: ['提交', '取消'] //可以无限个按钮
                        , yes: function (index, layero) {
                            var nodes = $('#menu-tree').tree('getChecked', ['checked', 'indeterminate']);//全选中和半选中的
                            var menuIds = new Array();
                            for (var i = 0; i < nodes.length; i++) {
                                menuIds.push(nodes[i].id);
                            }
                            $.ajax({
                                url: "role.html?act=assign-menu",
                                method: "post",
                                data: "roleId=" + data.id + "&menuIds=" + menuIds,
                                success: function (json) {
                                    if (json.status) {
                                        layer.close(index);
                                    } else {
                                        alert(json.message)
                                    }
                                }
                            })
                        }
                        , success: function (layero, index) {
                            $.ajax({
                                url: "role.html?act=role-menu",//获取角色菜单
                                data: "roleId=" + data.id,
                                success: function (json) {
                                    //渲染菜单树,要先获取角色菜单，在回调函数里写，否则 会先出现树，但没有被勾选
                                    $("#menu-tree").tree({
                                        url: "role.html?act=menu-tree",
                                        formatter: function (node) {//因为json数据中没有text,树默认要text属性当节点名，需要自己转换
                                            return node.name;
                                        },
                                        checkbox: true,
                                        onLoadSuccess: function (node, data) {
                                            for (var i = 0; i < json.length; i++) {
                                                var menu = $("#menu-tree").tree('find', json[i]);
                                                if ($("#menu-tree").tree('isLeaf', menu.target)) {//只选中叶子节点
                                                    $("#menu-tree").tree('check', menu.target);
                                                }
                                            }
                                        }
                                    });
                                }
                            })

                        }
                    });

                    break;
                }
            }
        });

        function openEditWindow(data) {
            layer.open({
                type: 1,
                content: $('#role-edit-layer').html(),
                title: '编辑角色'
                , area: ['500px', '300px'],
                btn: ['提交', '取消'] //可以无限个按钮
                , yes: function (index, layero) {
                    layer.load()
                    $.ajax({
                        url: 'role.html?act=edit',
                        data: $("#role-edit-form").serialize(),
                        method: 'post',
                        success: function (result) {
                            if (result.status) {
                                table.reload('role-table', {});
                                layer.close(index);
                            } else {
                                alert(result.message)
                            }
                            layer.closeAll('loading');
                        }
                    })
                }, success: function (layero, index) {
                    form.render()
                    if (data != null) {
                        form.val("role-edit-form", {
                            "id": data.id,
                            "name": data.name // "name": "value"
                            , "remark": data.remark,
                            "status": data.status + ""
                        });
                    }
                }
            });
        }

        $("#search-role-btn").click(function () {
            table.reload('role-table', {
                where: {
                    "name": $("#search-role-name").val()
                } //设定异步数据接口的额外参数
            });
        })
    })

</script>
<script type="text/html" id="role-edit-layer">
    <form id="role-edit-form" style="width: 80%" class="layui-form" lay-filter="role-edit-form">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" required lay-verify="required" placeholder="请输入备注" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" title="有效" value="1" checked/>
                <input type="radio" name="status" title="无效" value="0"/>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="menu-tree-layer">
    <ul id="menu-tree"></ul>
</script>